<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="../js/echarts.min.js"></script>
    <style>
        #airline {
            width: 600px;
            height: 400px;
        }
    </style>
    <script>
        // 初始的图表配置选项
        var option = {
            title: {
                text: '航班最低速比例图', // 标题文本
                left: 'center' // 标题位置，这里设置为居中
            },
            series: [] // 初始为空数组，稍后会填充数据
        };

        $(document).ready(function() {
            // 确保 DOM 加载完成后再初始化 ECharts 实例
            var myChart = echarts.init(document.getElementById("minPie"));

            $.getJSON('../word/min.json').done(function(data) {

                option.series = [{
                    type: 'pie', // 指定为扇形图
                    radius: '55%', // 扇形图的半径
                    data: [], // 用于存放扇区数据的数组
                    label: {
                        show: true,
                        formatter: '{b}: {c} ({d}%)' // 标签显示格式
                    }
                }];

                // 遍历 JSON 数据，并添加到 series.data 数组中
                data.forEach(function(item) {
                    option.series[0].data.push({
                        name: item.airline, // 扇区的名称
                        value: (parseFloat(item.min)/16.68 * 100) .toFixed(2) // 假设 min 是一个比例值，转换为百分比
                    });
                });

                // 使用新的选项设置图表
                myChart.setOption(option);
            }).fail(function(jqXHR, textStatus, errorThrown) {
                // 处理请求失败的情况
                console.error('Error fetching data:', textStatus, errorThrown);
            });
        });

        var option1 = {
            title: {
                text: '航空行程比例图', // 标题文本
                left: 'center' // 标题位置，这里设置为居中
            },
            series: [] // 初始为空数组，稍后会填充数据
        };

        $(document).ready(function() {
            // 确保 DOM 加载完成后再初始化 ECharts 实例
            var myChart1 = echarts.init(document.getElementById("sumPie"));

            $.getJSON('../word/sum.json').done(function(data) {

                option1.series = [{
                    type: 'pie', // 指定为扇形图
                    radius: '55%', // 扇形图的半径
                    data: [], // 用于存放扇区数据的数组
                    label: {
                        show: true,
                        formatter: '{b}: {c} ({d}%)' // 标签显示格式
                    }
                }];

                // 遍历 JSON 数据，并添加到 series.data 数组中
                data.forEach(function(item) {
                    option1.series[0].data.push({
                        name: item.airName, // 扇区的名称
                        value: (parseFloat(item.sum)/9326 * 100) .toFixed(2)// 假设 min 是一个比例值，转换为百分比
                    });
                });

                // 使用新的选项设置图表
                myChart1.setOption(option1);
            }).fail(function(jqXHR, textStatus, errorThrown) {
                // 处理请求失败的情况
                console.error('Error fetching data:', textStatus, errorThrown);
            });
        });



        $(document).ready(function() {
            // 初始化ECharts实例
            var myChart = echarts.init(document.getElementById('airline'));

            // 使用jQuery的$.getJSON方法加载JSON数据
            $.getJSON('../word/airline.json', function(data) {
                // 转换数据为ECharts需要的格式
                var categories = data.map(function(item) {
                    return item.airline;
                });
                var values = data.map(function(item) {
                    return parseInt(item.min);
                });

                // 设置ECharts的选项
                var option = {
                    title: {
                        text: '航班典型数量', // 标题文本
                        left: 'center' // 标题位置，这里设置为居中
                    },

                    xAxis: {
                        type: 'category',
                        data: categories,
                        inverse: true, // 反转X轴
                        axisLabel: {
                            rotate: 90,
                            interval: 0 // 如果需要显示所有标签，设置interval为0
                        },
                        axisTick: {
                            alignWithLabel: true // 刻度线对齐到标签
                        }
                    },
                    yAxis: {
                        type: 'value'

                    },
                    series: [{
                        data: values,
                        type: 'bar'
                    }]
                };

                // 使用配置项和数据显示图表
                myChart.setOption(option);
            }).fail(function(jqXHR, textStatus, errorThrown) {
                console.error('Error fetching data:', textStatus, errorThrown);
            });
        });

    </script>
</head>
<body>
<div id="minPie" style="width: 600px;height:400px; float: left"></div> <div id="sumPie" style="width: 600px;height:400px;float:right "></div>
<div id="airline" style="width: 1350px;height:400px;"></div>
</body>
</html>